<template>
  <div class="stepOne">
    <el-steps style="max-width: 600px" :active="active" align-center finish-status="success">
      <el-step title="开始换电"/>
      <el-step title="上报换电完成消息"/>
      <el-step title="上报充电完成消息"/>
    </el-steps>
    <el-button class="stepOneButton" @click="previous">上一步</el-button>
    <el-button class="stepOneButton" @click="next">下一步</el-button>
  </div>
  <div class="stepData">
    <div class="stepReq">
      <div v-if="active==0">
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            label-position="left"
            status-icon
        >
          <el-form-item label="env" prop="env">
            <el-select v-model="ruleForm.env" placeholder="选择环境">
              <el-option label="测试" value="1"/>
              <el-option label="demo" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="vin码" prop="vin">
            <el-input v-model="ruleForm.vin"/>
          </el-form-item>

          <el-form-item label="车牌" prop="carNo">
            <el-input v-model="ruleForm.carNo"/>
          </el-form-item>
          <el-form-item label="换电站platformKey" prop="platformKey">
            <el-input v-model="ruleForm.platformKey"/>
          </el-form-item>
          <el-form-item label="换电站secret" prop="secret">
            <el-input v-model="ruleForm.secret"/>
          </el-form-item>
          <el-form-item label="车辆里程" prop="odo">
            <el-input v-model="ruleForm.odo"/>
          </el-form-item>
          <el-form-item label="换上电池" prop="upBatteryNo">
            <el-input v-model="ruleForm.upBatteryNo"/>
          </el-form-item>
          <el-form-item label="换下电池" prop="downBatteryNo">
            <el-input v-model="ruleForm.downBatteryNo"/>
          </el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
        </el-form>
      </div>
      <div v-if="active>=1 && active <3">
        <el-button type="primary" @click="submitReport">
          执行上报
        </el-button>
      </div>
    </div>
    <div class="stepResp">
      <el-descriptions
          class="margin-top"
          title="请求结果"
          :column="3"
          size="default"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Grid/>
              </el-icon>
              换电站订单号
            </div>
          </template>
          {{ responseData.stationOrderId }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="flex gap-2">
        <el-tag size="large">二维码</el-tag>
      </div>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref} from 'vue'
import {ComponentSize, FormInstance, FormRules} from "element-plus";
import {checkInputPositiveRealNum} from '@/utils/validate'
import * as autoChangeHttp from './auto-change'
import QRCode from 'qrcodejs2-fix'
import {Grid,} from '@element-plus/icons-vue'

const active = ref(0)

const {proxy} = getCurrentInstance()

const next = () => {
  if (active.value++ > 3) active.value = 3
}
const previous = () => {
  if (--active.value < 0) {
    active.value = 0
  }
  console.log(active)
}


const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap["default"] || marginMap.default,
  }
})
onMounted(() => {
  nextTick(() => {
    creatQrCode('')
  })
})

const creatQrCode = (value) => {
  console.log("qrCodeUrl", proxy.$refs.qrCodeUrl)
  var qrcode = new QRCode(proxy.$refs.qrCodeUrl, {
    text: value, // 需要转换为二维码的内容
    width: 100,
    height: 100,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
  })
  console.log(qrcode, 'qrcode')
  return qrcode.value
}

interface RuleForm {
  vin: string,
  env: number,
  odo: number,
  carNo: String,
  upBatteryNo: String,
  downBatteryNo: String,
  platformKey: String,
  secret: String,
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  vin: '',
  env: '1',
  odo: null,
  carNo: '',
  upBatteryNo: '',
  downBatteryNo: '',
  platformKey: '',
  secret: '',

})

const responseData = reactive({
  stationOrderId: '',
})

const rules = reactive<FormRules<RuleForm>>({
  vin: [
    {required: true, message: 'vin码不能为空', trigger: 'blur'},
  ],
  env: [
    {required: true, message: '环境不能为空', trigger: 'blur'},
  ],
  odo: [
    {required: true, message: '车辆里程数不能为空', trigger: 'blur'},
    {validator: checkInputPositiveRealNum, trigger: 'blur'},
  ],
  carNo: [
    {required: true, message: '车牌号不能为空', trigger: 'blur'}
  ],
  platformKey: [
    {required: true, message: '换电站platform不能为空', trigger: 'blur'},
  ],
  secret: [
    {required: true, message: '换电站密钥不能为空', trigger: 'blur'}
  ]
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      autoChangeHttp.getQRCode(ruleForm).then((response) => {
        let qrCodeContain = proxy.$refs.qrCodeUrl
        let {stationOrderId, code} = response.data
        responseData.stationOrderId = stationOrderId
        qrCodeContain.textContent = ''
        creatQrCode(code)
        qrCodeContain.firstChild.style = "display: none;"
        active.value = 1;
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const submitReport = async () => {
  if (active.value == 2) {
    console.log("上报充电完成")
    await autoChangeHttp.submitChargingComplete(responseData)
    active.value = 3;
  }
  if (active.value == 1) {
    console.log("上报换电完成")
    await autoChangeHttp.submitSwapComplete(responseData)
    active.value = 2;
  }
}


</script>
<style scoped>
.stepOneButton {
  margin-left: 2.5rem;
}

.stepOne {
  text-align: start;
}

.stepData {
  margin-top: 1rem;
  display: flex;
  height: 30rem;
}

.stepReq {
  width: 60%;
  background-color: #D3DCE6;
}

.stepResp {
  background-color: #888888;
  width: 40%;
}

.qrcode {
  display: inline-block;
}

.qrcode:first-child {
  display: none;
}
.qrcode{
  display: inline-block;
  width: 135px;
  height: 135px;
  background-color: #909399;
}
</style>